
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>testWATER</title>
<style type="text/css">
body {
	margin: 0;
	overflow: hidden;
	background: #fff;
}

#map {
	position: relative;
	height: 99%;
	border: 1px solid #3473b7;
	top: 0px;
}
</style>

<script src='../scripts/supermap/libs/SuperMap.Include.js'></script>
<script src="data/animationPolygonData.js"></script>
<script src="data/test.js"></script>
<script src='./js/layer/Baidu.js'></script>
<script src='./js/layer/Tianditu.js'></script>
<script type="text/javascript">
	var map, layer, pointVector, vector, animatorVector, markers,dataAdded = false;
	var popup = null;
	var url = "http://localhost:6080/arcgis/rest/services/SampleWorldCities/MapServer";
	var style1 = {
		fillColor : "#b6fb7e",
		fillOpacity : 0.5,
		strokeOpacity : 0
	};
	var style2 = {
		fillColor : "#ffff00",
		fillOpacity : 0.8,
		strokeOpacity : 0
	};
	var style3 = {
		fillColor : "#efad3b",
		fillOpacity : 0.8,
		strokeOpacity : 0
	};
	var style4 = {
		fillColor : "#ef8425",
		fillOpacity : 0.8,
		strokeOpacity : 0
	};
	var style5 = {
		fillColor : "#ef255e",
		fillOpacity : 0.5,
		strokeOpacity : 0
	};
	var style6 = {
		fillColor : "#f80f1a",
		fillOpacity : 0.8,
		strokeOpacity : 0
	};
	var style7 = {
		fillColor : "#ff000",
		fillOpacity : 0.8,
		strokeOpacity : 0
	};
	style8 = {
            fillColor: "#fb8722",
            fillOpacity: 0.8,
            strokeOpacity : 0
        };

	function init() {
		if (!document.createElement('canvas').getContext) {
			alert('您的浏览器不支持 canvas，请升级');
			return;
		}

		map = new SuperMap.Map("map", {
			controls : [ new SuperMap.Control.Navigation(),
					new SuperMap.Control.Zoom(),
					new SuperMap.Control.LayerSwitcher(),
					new SuperMap.Control.MousePosition() ],
			allOverlays:true,
			projection : "EPSG:4326"

		});
		// layer = new SuperMap.Layer.Tianditu();
		//layer=new SuperMap.Layer.TiledDynamicRESTLayer("China", url, {transparent: true});
		vector = new SuperMap.Layer.Vector("vector");

		//初始化标记图层类
		markers = new SuperMap.Layer.Markers("Markers");

		//map.addLayers([markers]);

		map.addLayers([ markers]);

		// 添加image图层
		var options = {numZoomLevels: 12,useCanvas:false};
		var bounds= new SuperMap.Bounds(115.618, 26.499, 117.306, 28.512);
		var layerimage=new SuperMap.Layer.Image(
		'World_Day',
		'L14.png',
		bounds ,
		options
		);
		map.addLayer(layerimage);
		//addData();
		//map.zoomToExtent(new SuperMap.Bounds(113.54,24.5,118.444,30.0),false);
		map.setCenter(new SuperMap.LonLat(116.54, 27.65), 9);//testline 116.51258518370038, 27.918103135821017; fuhe116.36139044519226,26.906358424245848
		//map.setCenter(new SuperMap.LonLat(12982530, 3167555), 10);
		// 注释{SuperMap.Bounds} 在图层实例化的时候设置图层的最大范围，平移过程中边界中心点不会偏离可视窗口。 不同的投影下范围不同，如world在“EPSG：4326”下一般为左下： ( -180.0 , -90.0 )，右上： ( 180.0 , 90.0 ) 而在“EPSG：3857”下为左下： ( -20037508.34 , -25776731.36 )，右上： ( 20037508.34 , 25776731.36 )
         map.addLayers([vector ]);

		var select = new SuperMap.Control.SelectFeature([ vector], {
		onSelect : onFeatureSelect,   //选中vector图层上的面，弹出当前的value
		onUnselect : onFeatureUnselect  //在没选中元素的时候会调用此函数
		});
		map.addControl(select);
		// 激活选择要素的控件
		select.activate();


		addRegions();

		//初始化动画矢量图层
		animatorVector = new SuperMap.Layer.AnimatorVector("Polygon", {}, {
			//设置速度为每帧播放0.01小时的数据
			speed : 1,
			//开始时间为12点
			startTime : 0,
			//每秒渲染12次
			frameRate : 3,
			//结束时间为15点
			endTime : 30
		});

		map.addLayers([ animatorVector ]);
		//addPolygon1();
		// addData();
		monitor();

		//监听图层信息加载完成事件
		// layer.events.on({
		// 	"layerInitialized" : function() {
		//
		// 		map.addLayers([ layer, animatorVector ]);
		// 		map.addControl(selectFeature);
		// 		selectFeature.activate();
		// 		// map.setCenter(new SuperMap.LonLat(11586634.286396, 3588716.5813769), 9);
		// 		//增加数据
		// 		// addPolygon();
		//
		//
		// 	}
		// });

		var selectFeature = new SuperMap.Control.SelectFeature(animatorVector,
				{
					onSelect : function(fe) {
						console.log(fe);
					},
					hover : false
				});



addMarker();
	  }

	function addData() {
		if (!dataAdded) {
			vector.removeAllFeatures();
			//点对象
			var point = new SuperMap.Geometry.Point(116.52922276463352,
					27.915464063875863);
			var pointVector = new SuperMap.Feature.Vector(point);
			pointVector.style = {
				fillColor : "red",
				strokeColor : "yellow",
				pointRadius : 10
			};

			// 矩形
			//var x = 7577600;
			//var y = 1900544;
			//var w = 8000000;
			// var h = 6000000;
			var x = 116.51258518370038;
			var y = 27.918103135821017;
			var w = 116.53266912068392;
			var h = 27.915041806325249;
			var rectangle = new SuperMap.Geometry.Rectangle(x, y, w, h);
			var rectangleVector = new SuperMap.Feature.Vector(rectangle);
			rectangleVector.style = {
				fillOpacity : 0.02,
				strokeOpacity : 0.1
			};

			vector.addFeatures([ pointVector, rectangleVector ]);
			dataAdded = true;
		} else {
			alert("数据已加载。");
		}
	}

	//定义addMarker函数，触发layerInitialized事件会调用此函数
	function addMarker(){

		var markersInfo = [{name:'沙子岭',l1:116.3440,l2:26.8806},{name:'南丰',l1:116.5312,l2:27.2052},{name:'廖家湾',l1:116.4004,l2:27.9757},{name:'娄家村',l1:116.2965,l2:27.9893},{name:'马圩',l1:116.4544,l2:28.1204},{name:'李家渡',l1:116.1511,l2:28.2175},{name:'南城',l1:116.6352,l2:27.5474},{name:'黎川',l1:116.9042,l2:27.2928}];

		for(var i in markersInfo){
	var size = new SuperMap.Size(30,25);
	var offset = new SuperMap.Pixel(-(size.w/2), -size.h);
	var icon = new SuperMap.Icon('../scripts/supermap/theme/images/marker.png', size, offset);
	//初始化标记覆盖物类
	var marker = new SuperMap.Marker(new SuperMap.LonLat(markersInfo[i].l1,markersInfo[i].l2),icon);

	marker.markerName = markersInfo[i].name;
	//添加覆盖物到标记图层
	markers.addMarker(marker);


	//注册 click 事件,触发 mouseClickHandler()方法
	marker.events.on({"click":mouseClickHandler,
		"scope": marker,
	"touchstart":mouseClickHandler //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
	});
	}

	}

	var infowin = null;
//定义mouseClickHandler函数，触发click事件会调用此函数
function mouseClickHandler(event){
	var marker = this;
closeInfoWin();

var contentHTML = "<div style='width:80px; font-size:12px;font-weight:bold ; opacity: 0.8'>";
contentHTML += marker.markerName;
contentHTML += "</div>";

//初始化FramedCloud类
framedCloud = new SuperMap.Popup.FramedCloud(
"chicken",
marker.getLonLat(),
null,
contentHTML,
null,
true,
null,
true
);

infowin = framedCloud;
map.addPopup(framedCloud);
}

function closeInfoWin(){
if(infowin){
try{
infowin.hide();
infowin.destroy();
}
catch(e){}
}
}



	function removeData() {
		dataAdded = false;
		vector.removeAllFeatures();
		vector.refresh();
	}

	//添加面数据
	function addPolygon1() {
		//alert(fuhe.features[0].geometry.rings[0]);// 一组点组成线
		//alert(fuhe.features.length);
		// 取数据 ：// var point = new SuperMap.Geometry.Point(fuhe.features[i].geometry.rings[0][j][0],fuhe.features[i].geometry.rings[0][j][1]);

		var regionFeatures = [];
		//alert(lines.length);
		for (var i = 0, len = lines.length; i < len; i++) {
			var arr = [];
			for (var j = 0; j < fuhe.features[i + 1].geometry.rings[0].length; j++) {
				var point = new SuperMap.Geometry.Point(
						fuhe.features[i + 1].geometry.rings[0][j][0],
						fuhe.features[i + 1].geometry.rings[0][j][1]);
				arr.push(point);
				//alert(point);
			}

			var line = new SuperMap.Geometry.LinearRing(arr);
			var linecVector = new SuperMap.Feature.Vector(line);
			linecVector.style = {
				strokeColor : "#99CCFF",
				fillColor : "#99CCFF",
				strokeWidth : 2
			};
			vector.addFeatures([ linecVector ]);

			var region = new SuperMap.Geometry.Polygon([ line ]);
			var style;
			if (lines[i][2] == 31) {
				style = style1;
			} else if (lines[i][2] == 32) {
				style = style2;
			} else if (lines[i][2] == 33) {
				style = style3;
			} else if (lines[i][2] == 34) {
				style = style4;
			} else if (lines[i][2] == 35) {
				style = style5;
			} else if (lines[i][2] == 36) {
				style = style6;
			} else if (lines[i][2] == 37) {
				style = style7;
			}
			var regionFeature = new SuperMap.Feature.Vector(region, {
				FEATUREID : lines[i][0],
				TIME : lines[i][1],
				TEMPERATURE : lines[i][2]
			}, style);
			regionFeatures.push(regionFeature);
		}
		animatorVector.addFeatures(regionFeatures);
	}

	 //将河段转化为面 为什么这样显示整条和页面就死了呢
	 function addRegions() {

	    for (var i = 0; i < fuhe.features.length;i++) {

	        var arr = [];
			for (var j = 0; j < fuhe.features[i].geometry.rings[0].length; j++) {
				var point = new SuperMap.Geometry.Point(
						fuhe.features[i].geometry.rings[0][j][0],
						fuhe.features[i].geometry.rings[0][j][1]);
				arr.push(point);

			}
			var line = new SuperMap.Geometry.LinearRing(arr);
			var linecVector = new SuperMap.Feature.Vector(line);
			linecVector.style = {
				strokeColor : "#99CCFF",
				fillColor : "#99CCFF",
				strokeWidth : 1
			};
			vector.addFeatures([ linecVector ]);
		}
	}

	//添加数据
	function monitor() {
		//初始化数据

		animatorVector.removeAllFeatures();
		var features = [];
		var len = results.length;
		//alert(results[0].value);
		for (var i = 0; i < len; i++) {
			var id = results[i].Fid;
			var feature = fuhe.features[id];
			//var data = feature.attributes;
			//data['TIME'] = results[i].time;
			//data['FEATUREID'] = results[i].Fid;// js的原型链 会作用到feature的属性
			var style;

			var value = results[i].value;
			if (value == 0) {
				style = style1;
			} else if (value == 1) {
				style = style2;
			} else if (value == 2) {
				style = style3;
			} else if (value == 3) {
				style = style4;
			} else if (value == 4) {
				style = style5;
			} else if (value == 5) {
				style = style6;
			} else if (value == 6) {
				style = style7;
			} else {
				style = style8;
			}

			var arr = [];
			for (var j = 0; j < feature.geometry.rings[0].length; j++) {
				var point = new SuperMap.Geometry.Point(
						feature.geometry.rings[0][j][0],
						feature.geometry.rings[0][j][1]);
				arr.push(point);

			}
			var line = new SuperMap.Geometry.LinearRing(arr);


			var region = new SuperMap.Geometry.Polygon([ line ]);

			var regionFeature = new SuperMap.Feature.Vector(region, {
				FEATUREID : results[i].Fid,
				TIME : results[i].time,
				VALUE : results[i].value
			}, style);

			features.push(regionFeature);


		}

		 animatorVector.addFeatures(features);
	};

	//开始播放动画
	function startAnimator() {
		animatorVector.animator.start();
	}
	//暂停播放动画
	function pauseAnimator() {
		animatorVector.animator.pause();
	}


	//各类回调函数，以及气泡框实现

	function onFeatureSelect(feature) {
	//保持地图上只有一个弹出框
	if (popup != null) {
	map.removePopup(popup);
	popup.destroy();
	popup = null;
	}
	//alert(00);
	//弹出框内的html语句，随意添加
	var contentHTML = "<div style='font-size:.8em; opacity: 0.8; width:150px; height:50px;'>"+feature.attributes['VALUE']+"</div>";
	popup = new SuperMap.Popup.FramedCloud("name", feature.geometry .getBounds().getCenterLonLat(), null, contentHTML, null, true);
	popup.panMapIfOutOfView = true;
	map.addPopup(popup);
	}
	// 清除要素时调用此函数
	function onFeatureUnselect(feature) {
	map.removePopup(feature.popup);
	feature.popup.destroy();
	feature.popup = null;
	}

</script>
</head>
<body onLoad="init()">
	<div id="toolbar" style="display: none;">
		<input type="button" class="btn" value="播放" onclick="startAnimator()" />
		<input type="button" class="btn" value="暂停" onclick="pauseAnimator()" />
	</div>
	<div id="map"></div>
</body>
</html>
